<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax Pagination Example</title>
    <!-- 引入Bootstrap CSS，使用国内镜像 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<div class="container mt-5">
    <h2>聊天记录</h2>

    <table class="table table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>姓名</th>
                <th>邮箱</th>
            </tr>
        </thead>
        <tbody id="tableBody"></tbody>
    </table>

    <nav aria-label="Page navigation example">
        <ul class="pagination" id="pagination"></ul>
    </nav>
</div>

<!-- 引入jQuery，使用国内镜像 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 自定义的JavaScript代码 -->
<script>
    // 假设这是你的API端点，用于获取分页数据
    var apiEndpoint = 'http://124.70.50.228:8000/api/messages';

    // 每页显示的记录数
    var pageSize = 5;

    // 当前页码
    var currentPage = 1;

    // 渲染表格数据
    function renderTableData(data) {
        var tbody = $('#tableBody');
        tbody.empty();

        data.forEach(function(item, index) {
            var row = $('<tr></tr>');
            row.append($('<td></td>').text(index + 1));
            row.append($('<td></td>').text(item.name));
            row.append($('<td></td>').text(item.email));
            tbody.append(row);
        });
    }

    // 渲染分页链接
    function renderPaginationLinks(totalPages, currentPage) {
        var pagination = $('#pagination');
        pagination.empty();

        // 上一页按钮
        if (currentPage > 1) {
            var prevLink = $('<a></a>').attr('href', '#').text('上一页');
            var prevLi = $('<li></li>').addClass('page-item').append(prevLink);
            prevLink.click(function(event) {
                event.preventDefault();
                loadData(currentPage - 1);
            });
            pagination.append(prevLi);
        }

        // 页码按钮
        for (var i = 1; i <= totalPages; i++) {
            var li = $('<li></li>');
            var link = $('<a></a>').attr('href', '#').text(i);

            if (i === currentPage) {
                link.addClass('active');
            } else {
                link.click(function(event) {
                    event.preventDefault();
                    loadData(parseInt($(this).text()));
                });
            }

            li.append(link);
            pagination.append(li);
        }

        // 下一页按钮
        if (currentPage < totalPages) {
            var nextLink = $('<a></a>').attr('href', '#').text('下一页');
            var nextLi = $('<li></li>').addClass('page-item').append(nextLink);
            nextLink.click(function(event) {
                event.preventDefault();
                loadData(currentPage + 1);
            });
            pagination.append(nextLi);
        }
    }

    // 发送请求获取数据并更新表格和分页
    function loadData(page) {
    // 确保页码是一个数字
    if (isNaN(page) || page < 1) {
        console.error('Invalid page number');
        return;
    }

    $.ajax({
        url: apiEndpoint,
        method: 'GET',
        data: {
            page: page,
            size: pageSize
        },
        success: function(response) {
            // 假设响应数据有一个名为'data'的字段，其中包含当前页的数据
            // 并且有一个名为'totalPages'的字段，表示总页数
            if (response && response.data && response.totalPages) {
                var data = response.data;
                var totalPages = response.totalPages;

                // 渲染表格数据
                renderTableData(data);

                // 渲染分页链接
                renderPaginationLinks(totalPages, page);
            } else {
                console.error('Invalid response format from the server');
                // 可以在这里添加额外的错误处理逻辑，比如显示一个错误消息给用户
            }
        },
        error: function(xhr, status, error) {
            // 处理AJAX请求失败的情况
            console.error('AJAX error666: ' + error);
            // 可以在这里添加额外的错误处理逻辑，比如显示一个错误消息给用户


                            // 生成测试数据
            var testData = [
                { name: '张三1', email: 'zhangsan@example.com' },
                { name: '李四2', email: 'lisi@example.com' },
                { name: '王五', email: 'wangwu@example.com' },
                { name: '赵六', email: 'zhaoliu@example.com' },
                { name: '孙七', email: 'sunqi@example.com' }
            ];

            // 调用函数
            renderTableData(testData);
            renderPaginationLinks(5, 1);
        }
    });}

    // 生成测试数据
var testData = [
    { name: '张三', email: 'zhangsan@example.com' },
    { name: '李四', email: 'lisi@example.com' },
    { name: '王五', email: 'wangwu@example.com' },
    { name: '赵六', email: 'zhaoliu@example.com' },
    { name: '孙七', email: 'sunqi@example.com' }
];

// 调用函数
renderTableData(testData);
renderPaginationLinks(5, 1);
// renderPaginationLinks(5, );
</script>


<style>
    #pagination > li:nth-child(3) > a {
    color: #00ff73;
    text-decoration: none;
    background-color: transparent;
}
.pagination a {
    color: #75797c;
    border: 1px solid #dee2e6;
    border-radius:6px;
    padding: 5px 10px;
    text-decoration: none;
    margin: 0 5px;
    transition: background-color 0.3s;
}

.pagination a:hover {
    background-color: rgb(184, 183, 183);
    color: white;
}
</style>
</body>
</html>
<!-- Path: webpage/validateForm.html -->
